<template>
  <div id="subpage" v-loading="loading">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <b>楼盘管理</b>
        </el-breadcrumb-item>
        <el-breadcrumb-item to="/house/index">楼盘列表</el-breadcrumb-item>
        <el-breadcrumb-item>添加楼盘</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <div class="content">
      <div class="xcx-head">
        <span class="title">添加楼盘</span>
        <div style="display: flex">
          <el-button size="small" icon="el-icon-back" type="primary" @click="back()">返回</el-button>
        </div>
      </div>
      <div class="xcx-content">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="160px" style="width: 70%">
          <el-form-item label="所属地区：" prop="class_id">
            <el-select filterable style="width: 100%;" v-model="ruleForm.city_id" placeholder="请选择">
              <el-option v-for="(item, index) in classData" :key="index" :label="item.title"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="楼盘名称：" prop="title">
            <el-input v-model="ruleForm.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="楼盘标签：" prop="tags">
            <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
              @close="handleClose(tag)">
              {{ tag }}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
              @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
          </el-form-item>
          <el-form-item label="全屏图：" class="banner_img">
            <el-col :span="6">
              <el-upload :action="adminApi.upload_url" name="image" list-type="picture-card"
                :on-preview="handleThumbPreview" :on-success="handleThumbSuccess" :on-remove="thumbRemove"
                :file-list="fileList0">
                <i class="el-icon-plus"></i>
              </el-upload>
              <p class="form-tip">建议尺寸 1125*2436px，或等比例缩放</p>
            </el-col>
            <el-col :span="2">推荐图：</el-col>
            <el-col :span="6">
              <el-upload :action="adminApi.upload_url" name="image" list-type="picture-card"
                :on-success="handleProjectSuccess" :on-remove="thumbProject" :file-list="fileListp">
                <i class="el-icon-plus"></i>
              </el-upload>
              <p class="form-tip">建议尺寸577×614px，或等比例缩放</p>
            </el-col>
            <el-col :span="2">项目图：</el-col>
            <el-col :span="6">
              <el-upload :action="adminApi.upload_url" name="image" list-type="picture-card"
                :on-success="handleDrawingSuccess" :on-remove="thumbDrawing" :file-list="fileLists">
                <i class="el-icon-plus"></i>
              </el-upload>
              <p class="form-tip">建议尺寸 1420×580px，或等比例缩放</p>
            </el-col>
          </el-form-item>
          <el-form-item label="楼盘费用：" prop="price">
            <el-col :span="7" style="margin-right: 10px;">
              <el-input v-model="ruleForm.price" placeholder="参考价格(不填为价格暂定)"></el-input>
            </el-col>
            <el-col :span="7" style="margin-right: 10px;">
              <el-input v-model="ruleForm.area" placeholder="参考面积"></el-input>
            </el-col>
            <el-col :span="7">
              <el-input v-model="ruleForm.total_price" placeholder="参考总价"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="楼盘热线：" prop="mobile">
            <el-col :span="7" style="margin-right: 10px;">
              <el-input v-model="ruleForm.mobile" placeholder="楼盘热线"></el-input>
            </el-col>
            <el-col :span="4" style="margin-right: 10px;text-align: right;">楼盘类型：</el-col>
            <el-col :span="6">
              <el-input v-model="ruleForm.types" placeholder="楼盘类型"></el-input>
            </el-col>
            <el-col :span="2" style="margin-right: 10px;text-align: right;">排序：</el-col>
            <el-col :span="4">
              <el-input v-model="ruleForm.sort" placeholder="楼盘类型"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="楼盘视频：" prop="video">
            <el-upload :action="adminApi.upload_url" name="image" :on-remove="videoRemove" :limit="1"
              :on-success="handleVideoSuccess" :file-list="videoList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传mp4文件，且不超过500Mb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="实景图：" prop="thumb">
            <el-upload :action="adminApi.upload_url" name="image" list-type="picture-card"
              :on-preview="handlePictureCardPreview" :on-success="handleAvatarSuccess" :on-remove="handleRemove"
              :file-list="fileList">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <p class="form-tip">建议尺寸 180 X 180，或等比例缩放</p>
          </el-form-item>
          <el-form-item label="效果图：" prop="photos1">
            <el-upload :action="adminApi.upload_url" name="image" list-type="picture-card"
              :on-preview="handlePictureCardPreview2" :on-success="handleAvatarSuccess2" :on-remove="handleRemove2"
              :file-list="fileList2">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <p class="form-tip">建议尺寸 180 X 180，或等比例缩放</p>
          </el-form-item>
          <el-form-item label="区位图：" prop="photos2">
            <el-upload :action="adminApi.upload_url" name="image" list-type="picture-card"
              :on-preview="handlePictureCardPreview3" :on-success="handleAvatarSuccess3" :on-remove="handleRemove3"
              :file-list="fileList3">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <p class="form-tip">建议尺寸 180 X 180，或等比例缩放</p>
          </el-form-item>
          <el-form-item label="周边配套：" prop="photos3">
            <el-upload :action="adminApi.upload_url" name="image" list-type="picture-card"
              :on-preview="handlePictureCardPreview4" :on-success="handleAvatarSuccess4" :on-remove="handleRemove4"
              :file-list="fileList4">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <p class="form-tip">建议尺寸 180 X 180，或等比例缩放</p>
          </el-form-item>
          <el-form-item label="户型图：" prop="thumb">
            <el-upload :action="adminApi.upload_url" name="image" list-type="picture-card"
              :on-preview="handlePictureCardPreview1" :on-success="handleAvatarSuccess1" :on-remove="handleRemove1"
              :file-list="fileList1">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible1">
              <img width="100%" :src="dialogImageUrl1" alt="">
            </el-dialog>
            <p class="form-tip">建议尺寸 180 X 180，或等比例缩放</p>
          </el-form-item>
          <el-form-item label="楼盘地址：" prop="address">
            <amap-dr @input="getAddressInfo" :lat="ruleForm.lat" :lng="ruleForm.lng"
              :address="ruleForm.address"></amap-dr>
          </el-form-item>
          <el-form-item label="首页推荐：">
            <el-radio-group v-model="ruleForm.is_index">
              <el-radio :label="0">不推荐</el-radio>
              <el-radio :label="1">精选列表</el-radio>
              <el-radio :label="2">项目推荐</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="楼盘详情：">
            <vue-ueditor-wrap v-model="ruleForm.content" :config="config" ref="ueditor"></vue-ueditor-wrap>
          </el-form-item>
          <el-form-item class="mar_T_50">
            <el-button style="width: 120px;" icon="el-icon-thumb" type="primary" @click="submitForm()">保存</el-button>
            <el-button style="width: 120px;" icon="el-icon-back" type="info" @click="back()">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import AmapDr from "../../components/AmapDr";
import VueUeditorWrap from "vue-ueditor-wrap";

export default {
  components: {
    AmapDr,
  },
  data() {
    return {
      loading: true,
      dialogImageUrl: '',
      dialogImageUrl1: '',
      dialogImageUrl2: '',
      dialogImageUrl3: '',
      dialogImageUrl4: '',
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dynamicTags: [],
      fileList: [],
      fileLists: [],
      fileListp: [],
      fileList0: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      videoList: [],
      inputVisible: false,
      inputValue: '',
      ruleForm: {
        title: "",
        drawing: "",
        thumb: "",
        city_id: "",
        imgs: [],
        house: [],
        photos1: [],
        photos2: [],
        photos3: [],
        price: "",
        area: "",
        tags: [],
        mobile: "",
        total_price: "",
        content: "",
        address: "",
        lat: "",
        lng: "",
        video: "",
        is_index: 0,
        sort: 0,
      },
      classData: [],
      id: "",
      rules: {
        city_id: [{ required: true, message: "请选择所属城市", trigger: "blur" }],
        title: [{ required: true, message: "请输入楼盘名称", trigger: "blur" }],
        imgs: [{ required: true, message: "请上传楼盘图", trigger: "blur" }],
        house: [{ required: true, message: "请上传户型图", trigger: "blur" }],
        address: [{ required: true, message: "请选择楼盘地址", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
      },
      config: {
        UEDITOR_HOME_URL: "/web_admin/UEditor/",
        autoHeightEnabled: false,
        initialFrameHeight: 300,
        initialFrameWidth: "99%",
        enableAutoSave: true, //自动保存
      },
    };
  },
  /**
   * 进入页面加载
   */
  mounted() {
    var that = this;
    var query = that.$route.query;
    if (query.id) {
      that.id = query.id;
      that.getDetail();
    }
    that.getArea();
  },
  methods: {

    changeAddress(e) {
      console.log(e);
    },

    getAddressInfo(e) {
      console.log(e);
      this.ruleForm.address = e.address;
      this.ruleForm.lat = e.lat;
      this.ruleForm.lng = e.lng;
    },

    handleThumbSuccess(res, file) {
      this.ruleForm.thumb = res.data.img_url;
    },
    thumbRemove(file, fileList) {
      this.ruleForm.thumb = "";
    },
    handleThumbPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    handleDrawingSuccess(res, file) {
      this.ruleForm.drawing = res.data.img_url;
    },
    thumbDrawing(file, fileList) {
      this.ruleForm.drawing = "";
    },

    handleProjectSuccess(res, file) {
      this.ruleForm.project = res.data.img_url;
    },
    thumbProject(file, fileList) {
      this.ruleForm.project = "";
    },

    handleVideoSuccess(res, file) {
      this.ruleForm.video = res.data.img_url;
    },

    videoRemove(file, fileList) {
      this.ruleForm.video = "";
    },

    handleRemove(file, fileList) {
      console.log(file);
      this.ruleForm.imgs.forEach((ele, idx) => {
        if (ele == file.url) {
          this.ruleForm.imgs.splice(idx, 1);
        }
      });
      console.log(this.ruleForm.imgs);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
      this.ruleForm.imgs.push(res.data.img_url);
    },

    handleRemove1(file, fileList) {
      console.log(file);
      this.ruleForm.house.forEach((ele, idx) => {
        if (ele == file.url) {
          this.ruleForm.house.splice(idx, 1);
        }
      });
      console.log(this.ruleForm.house);
    },

    handlePictureCardPreview1(file) {
      this.dialogImageUrl1 = file.url;
      this.dialogVisible1 = true;
    },

    handleAvatarSuccess1(res, file) {
      this.ruleForm.house.push(res.data.img_url);
    },

    handleRemove2(file, fileList) {
      this.ruleForm.photos1.forEach((ele, idx) => {
        if (ele == file.url) {
          this.ruleForm.photos1.splice(idx, 1);
        }
      });
    },
    handlePictureCardPreview2(file) {
      this.dialogImageUrl2 = file.url;
      this.dialogVisible2 = true;
    },
    handleAvatarSuccess2(res, file) {
      console.log(res.data.img_url);
      this.ruleForm.photos1.push(res.data.img_url);
      console.log(this.ruleForm.photos1);
    },
    handleRemove3(file, fileList) {
      this.ruleForm.photos2.forEach((ele, idx) => {
        if (ele == file.url) {
          this.ruleForm.photos2.splice(idx, 1);
        }
      });
    },
    handlePictureCardPreview3(file) {
      this.dialogImageUrl3 = file.url;
      this.dialogVisible3 = true;
    },
    handleAvatarSuccess3(res, file) {
      this.ruleForm.photos2.push(res.data.img_url);
    },
    handleRemove4(file, fileList) {
      this.ruleForm.photos3.forEach((ele, idx) => {
        if (ele == file.url) {
          this.ruleForm.photos3.splice(idx, 1);
        }
      });
    },
    handlePictureCardPreview4(file) {
      this.dialogImageUrl4 = file.url;
      this.dialogVisible4 = true;
    },
    handleAvatarSuccess4(res, file) {
      this.ruleForm.photos3.push(res.data.img_url);
    },

    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      this.ruleForm.tags = this.dynamicTags;
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
        this.ruleForm.tags = this.dynamicTags;
      }
      this.inputVisible = false;
      this.inputValue = '';
    },

    getArea() {
      let that = this;
      that.axios.post("/getArea").then((res) => {
        if (res) {
          that.classData = res.data;
          that.loading = false;
        }
      });
    },

    /**
     * 获取详情
     */
    getDetail() {
      var that = this;
      that.axios
        .post("/house/detail", {
          id: that.id,
        })
        .then((res) => {
          console.log(res);
          if (res) {
            that.ruleForm = res.data;
            that.dynamicTags = res.data.tags;
            this.fileList = res.data.imgs.map(item => ({
              name: '楼盘图',
              url: item
            }));
            this.fileList1 = res.data.house.map(item => ({
              name: '效果图',
              url: item
            }));
            this.fileList2 = res.data.photos1.map(item => ({
              name: '区位图',
              url: item
            }));
            this.fileList3 = res.data.photos2.map(item => ({
              name: '周边配套',
              url: item
            }));
            this.fileList4 = res.data.photos3.map(item => ({
              name: '户型图',
              url: item
            }));
            if (res.data.video) {
              console.log(res.data.video);
              let video = [
                {
                  'name': "楼盘视频",
                  'url': res.data.video,
                }
              ];
              this.videoList = video;
            }
            if (res.data.thumb) {
              let thumb = [
                {
                  'name': "楼盘视频",
                  'url': res.data.thumb,
                }
              ];
              this.fileList0 = thumb;
            }
            if (res.data.drawing) {
              let drawing = [
                {
                  'name': "楼盘视频",
                  'url': res.data.drawing,
                }
              ];
              this.fileLists = drawing;
            }
            if (res.data.project) {
              let project = [
                {
                  'name': "楼盘视频",
                  'url': res.data.project,
                }
              ];
              this.fileListp = project;
            }
          }
          console.log(this.videoList);
          that.loading = false;
        });
    },

    submitForm() {
      const that = this;
      console.log(this.dynamicTags);
      that.$refs.ruleForm.validate((valid) => {
        if (!valid) return that.$message.warning("请完整填写内容!");
        var formData = {};
        formData = that.ruleForm;
        var url = "/house/beforeSave";
        if (that.id) {
          formData.id = that.id;
        }
        that.axios.post(url, formData).then(() => {
          that.$message.success(that.id ? "修改成功" : "添加成功");
          that.$router.push("/house/index");
        });
      });
    },
    /**
     * 返回
     */
    back() {
      this.$router.push("/house/index");
    },
  },
};
</script>
<style>
.el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

.edui-default {
  line-height: 20px;
}

.el-cascader-menu {
  overflow: hidden;
  width: 200px;
}

.el-scrollbar__wrap {
  overflow: auto;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>